<div class="grade-box-container" placement="bottom" tooltip="Index: {{score | number: '.1-2'}}">
  <div class="grade-box a" [class.active]="activeGrade === 'A'">
    <div class="grade">A</div>
    <div class="bottom"></div>
  </div>
  <div class="grade-box b" [class.active]="activeGrade === 'B'">
    <div class="grade">B</div>
    <div class="bottom"></div>
  </div>
  <div class="grade-box c" [class.active]="activeGrade === 'C'">
    <div class="grade">C</div>
    <div class="bottom"></div>
  </div>
  <div class="grade-box d" [class.active]="activeGrade === 'D'">
    <div class="grade">D</div>
    <div class="bottom"></div>
  </div>
  <div class="grade-box e" [class.active]="activeGrade === 'E'">
    <div class="grade">E</div>
    <div class="bottom"></div>
  </div>
</div>